<template>
	<view class="pcontent">
		<view class="tp">
			<image src="../../static/imgs/logo_bbl2.png" style="width: 400rpx;" mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="sc">
				<uni-easyinput v-model="recordCode" @input="onChange" :styles="styles" suffixIcon="search" confirmType="search" @confirm="onIconClick" @iconClick="onIconClick" placeholder="请输入球杆编码"></uni-easyinput>
			</view>
		</view>
		<view class="result" v-if="loaded">
			<template v-if="isok">
				<view class="okres">
					<view class="tlp" v-text="`编号【${recordCode}】验真结果：`"></view>
					<view class="resinfo">
						<view class="resitem">
							<view class="label">品牌</view>
							<view class="value" v-text="record.recordBrand"></view>
						</view>
						<view class="resitem">
							<view class="label">重量</view>
							<view class="value" v-text="record.recordWeight + '(g)'"></view>
						</view>
						<view class="resitem">
							<view class="label">长度</view>
							<view class="value" v-text="record.recordLength + '(cm)'"></view>
						</view>
						<view class="resitem">
							<view class="label">重心</view>
							<view class="value" v-text="record.recordCenter + '(cm)'"></view>
						</view>
						<view class="resitem">
							<view class="label">杆头直径</view>
							<view class="value" v-text="record.recordTopDiam + '(cm)'"></view>
						</view>
						<view class="resitem">
							<view class="label">握把直径</view>
							<view class="value" v-text="record.recordTailDiam + '(cm)'"></view>
						</view>
					</view>
					<view class="restxt" v-if="record.recordText" v-text="record.recordText"></view>
					<view class="resimgs">
						<image class="resimg" mode="widthFix" v-for="item in record.recordMainImgs" :key="item.attId" :src="item.url"></image>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="nores">抱歉，您查询的球杆不存在</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {apiBase, check_record_code} from '../../request/index.js'
	export default {
		data() {
			return {
				recordCode : "",
				styles: {
					borderColor: "transparent",
					color: "#cb9e70"
				},
				loaded: false,
				isok : false,
				record : {}
			}
		},
		onShareAppMessage(){
			return {
				title: "巴比伦台球 - 球杆验真",
				path: "/pages/verify/verify?recordCode=" + this.recordCode
			}
		},
		onLoad(options) {
			if(options.recordCode){
				this.recordCode = options.recordCode;
				this.onIconClick();
			}
		},
		onShow() {
			
		},
		methods: {
			onChange (){
				this.loaded = false;
				this.isok = false;
			},
			async onIconClick () {
				if(!this.recordCode){
					uni.showToast({
						title: "请输入球杆编码",
						icon: "error"
					})
				} else {
					this.loaded = false;
					try{
						const result = await check_record_code(this.recordCode);
						if(result.message === '查询的球杆不存在'){
							this.record = {};
							this.isok = false;
						} else {
							this.isok = true;
							result.data.recordMainImgs.forEach(d => {
								d.url = apiBase + d.url;
							});
							this.record = result.data;
						}
					}catch(e){
						//TODO handle the exception
					} finally {
						this.loaded = true;
					}
				}
			}
		}
	}
</script>

<style>
page{
	background-color: #000;
	background-image: url('https://yz.bbl147.cn/template/bg.jpg');
	background-size: 100% auto;
}

.pcontent{
	
}

.pcontent .tp{
	text-align: center;
	padding: 100rpx 0;
}

.pcontent .tp .tpt{
	font-size: 25px;
	color: #FFF;
	font-weight: bold;
}

.pcontent .main{
	padding: 0 25rpx;
}

.pcontent .main .uni-easyinput{
	border: 1px solid #cb9e70;
}

.pcontent .main .uni-easyinput .uni-icons{
	color: #cb9e70 !important;
}

.nores{
	color: #E06426;
	text-align: center;
	margin-top: 70rpx;
	font-weight: bold;
}

.okres{
	color: #E06426;
	text-align: left;
	font-size: 14px;
	padding: 25rpx;
}

.okres .tlp{
	font-weight: bold;
	font-size: 16px;
	margin: 30rpx 0;
}

.okres .resinfo{
	display: flex;
	flex-wrap: wrap;
}

.okres .resinfo .resitem{
	width: 50%;
	margin-top: 20rpx;
	display: flex;
}

.okres .resinfo .resitem .label{
	width: 130rpx;
}

.okres .resinfo .resitem .value{
	width: calc(100% - 130rpx);
	color: #FFF;
}

.okres .restxt{
	margin-top: 20rpx;
	color: #FFF;
	font-size: 14px;
}

.okres .resimgs{
	margin-top: 20rpx;
}

.okres .resimgs .resimg{
	width: 100%;
}
</style>
